// ...existing code...
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: block;
            width: 1000px;
            height: 500px;
            /* background-color: pink; */
            margin-left: 20px;
        }

        .first {
            display: flex;
            height: 50px;
            width: 1000px;
        }

        .first h3 {
            font-size: 24px;
        }

        /* 改为 ul 列表结构 */
        .title {
            margin-left: auto;
            width: 400px;
            height: 50px;
        }

        .title ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-between;
            height: 100%;
            align-items: center;
        }

        .title li {
            margin: 0;
        }

        .title a {
            display: block;
            line-height: 50px;
            font-size: 18px;
            font-weight: bold;
            color: #333;
            text-decoration: none;
            padding: 0 6px;
            cursor: pointer;
        }

        .title a.active {
            color: red;
            border-bottom: 2px solid red;
        }

        .box1 {
            width: 300px;
            height: 400px;
            /* background-color: aqua; */
            margin-top: 10px;
        }

        .box1 img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .box2 {
            margin-top: 10px;
            width: 700px;
            height: 400px;
            /* background-color: yellow; */
        }

        .box2 img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .cbox {
            display: flex;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="first">
            <h3>易业煜</h3>

            <!-- 改为 ul>li>a 结构 -->
            <nav class="title" aria-label="tabs">
                <ul>
                    <li><a href="#" data-index="0">精选</a></li>
                    <li><a href="#" data-index="1">美食</a></li>
                    <li><a href="#" data-index="2">百货</a></li>
                    <li><a href="#" data-index="3">个护</a></li>
                    <li><a href="#" data-index="4">预告</a></li>
                </ul>
            </nav>
        </div>
        <div class="cbox">
            <div class="box1">
                <img src="../images/img/1.webp" alt="">
            </div>
            <div class="box2">
                <img src="../images/img/2.webp" alt="">
            </div>
        </div>
    </div>
    <script>
        const titleWrap = document.querySelector('.title ul');
        const img1 = document.querySelector('.box1 img');
        const img2 = document.querySelector('.box2 img');

        const pairs = [
            ['../images/img/1.webp', '../images/img/2.webp'],
            ['../images/img/3.webp', '../images/img/4.webp'],
            ['../images/img/5.webp', '../images/img/6.webp'],
            ['../images/img/slider03.jpg', '../images/img/slider04.jpg'],
            ['../images/img/slider01.jpg', '../images/img/slider02.jpg']
        ];

        function setActive(index) {
            const anchors = titleWrap.querySelectorAll('a');
            anchors.forEach((a, i) => a.classList.toggle('active', i === index));
            if (pairs[index]) {
                img1.src = pairs[index][0];
                img2.src = pairs[index][1];
            }
        }

        // 事件委托：点击 a 时激活对应 tab
        titleWrap.addEventListener('click', (e) => {
            const a = e.target.closest('a');
            if (!a || !titleWrap.contains(a)) return;
            e.preventDefault();
            const idx = Number(a.dataset.index);
            if (!Number.isNaN(idx)) setActive(idx);
        });

        // 可选：鼠标移入也激活（若不需要可删）
        titleWrap.addEventListener('mouseover', (e) => {
            const a = e.target.closest('a');
            if (!a || !titleWrap.contains(a)) return;
            const idx = Number(a.dataset.index);
            if (!Number.isNaN(idx)) setActive(idx);
        });

        // 初始化第一个激活
        setActive(0);
    </script>
</body>

</html>
// ...existing code...